<template>
    <router-link to="/">home</router-link>

    <el-table :data="argList.mockData">
        <el-table-column prop="id" label="id"/>
        <el-table-column prop="type" label="type"/>
        <el-table-column prop="plan" label="plan"/>
        <el-table-column prop="title" label="操作">
            <template #default="scope">
                <el-button type="" @click="addSecKillListOne(scope.row)">添加到秒杀列表</el-button>
            </template>
        </el-table-column>
    </el-table>
  <!--抽屉按钮-->
    <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
        open
    </el-button>
  <!--抽屉列表-->
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <span>Hi there!</span>
        <el-table :data="argList.tableData">
            <el-table-column prop="id" label="id"/>
            <el-table-column prop="type" label="type"/>
            <el-table-column prop="plan" label="plan"/>
            <el-table-column prop="date" label="date"/>
            <el-table-column prop="title" label="操作">
                <template #default="scope">
                    <el-button type="" @click="addSecKillListOne(scope.row)">yi</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-drawer>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'

const drawer = ref(false)
const argList = reactive({
    tableData: [],
    mockData: [
        {
            id: 1,
            type: "起飞计算",
            plan: "WFGTT"
        },
        {
            id: 12,
            type: "起飞计算",
            plan: "WFGTT"
        },
        {
            id: 13,
            type: "起飞计算",
            plan: "WFGTT"
        },
        {
            id: 14,
            type: "起飞计算",
            plan: "WFGTT"
        },
    ]
})

const addSecKillListOne = (dataOne) => {
    console.log(dataOne)
    argList.tableData.push({
        date: new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, ''),
        id: dataOne.id,
        type: dataOne.type,
        plan: dataOne.plan
    })
    sessionStorage.setItem('tableData', JSON.stringify(argList.tableData));
}
onMounted(() => {
    console.log(sessionStorage.getItem('tableData'));
    // sessionStorage.clear();
    if (sessionStorage.getItem('tableData') !== null) {
        argList.tableData = JSON.parse(sessionStorage.getItem('tableData'));
    }
})
</script>
<style>
</style>